<template>
    <div style="padding-bottom: 20px;">
    <div class="df">  <h2>采购订单配送 <span  style="margin-left: 20px;color: #200281;">{{ Send.orderNo }}</span></h2></div>
      <el-row :span="6" class="df" style="margin: 20px 0;">
      <el-col :span="6" style="display: flex;justify-content: center;align-items: center;margin-right: 60px;">
      <span style="display: block;width: 100px;">医疗机构:</span> 
       <el-input v-model="Send.instName" size="mini" :disabled="true"></el-input>
    </el-col>
    <el-col :span="6" >
         <span style="margin-right: 20px;">配送状态:</span>
         <el-select v-model="state"  size="mini" placeholder="请选择" :clearable="true" >
          <el-option v-for="item in form" :key="item.distribution" :label="item.label" :distribution="item.distribution" >
          </el-option>
        </el-select>
      </el-col>
       <div class="df" >
        <div style="width: 80px;">通用名:</div>
         <el-input  size="mini" v-model="commonName" placeholder="请输入通用名" ></el-input>
       </div>
      <el-button type="primary" class="ml" @click="search">查询</el-button>
    </el-row>
    <el-alert size="mini"
          type="info"
          show-icon  style="background-color: #d3deee;border: 1px solid #2558ac; color: #2558ac;font-size: 14px;">
          药品种类总数 <span class="number">{{ num }}</span> 项，已配送药品种类 <span class="number">{{ medicinesNum }}</span> 项，未配送 <span class="number">{{ delivered }}</span> 项。已入库药品种类 <span class="number">{{ Storage }}</span> 项，未入库 <span class="number">{{ NotStorage }}</span> 项。
        </el-alert>
      <el-table
          :data="tableData1"
          style="width: 100%;margin-top: 20px;" size="mini">
          <el-table-column
            prop="orderNo"
            label="流水号"
            width="180">
          </el-table-column>
          <el-table-column
          prop="medicineName"
            label="通用名"
            width="180">
          </el-table-column>
          <el-table-column
          prop="categoryName"
            label="品种名称">
          </el-table-column>
          <el-table-column label="采购数量">
        <template slot-scope="scope">
         {{ scope.row.purchaseAmount }}
        </template>
      </el-table-column>
          <el-table-column
          prop="purchasePrice"
            label="采购价(元)">
          </el-table-column>
          <el-table-column
          prop="purchaseFee"
            label="采购金额(元)">
          </el-table-column>
          <el-table-column
            label="入库状态">
            <template slot-scope="scope">
            <el-tag size="mini" :type="typec(scope)" plain>{{ scope.row.label }}</el-tag>
          </template>
          </el-table-column>
          <el-table-column
          props="stockExplain"
            label="入库状态说明">
            <template slot-scope="scope">{{ scope.row.stockExplain }}</template>
            
          </el-table-column>
          <el-table-column
            label="配送状态确认">
            <template slot-scope="scope">
            <el-switch size="mini" v-model="scope.row.deliverStatus" @change="toTop(scope.row)" style="margin-right:10px">
    </el-switch>
{{ scope.row.deliverName }}
    </template>
          </el-table-column>
          
        </el-table>
        <div class="block" style="margin: 20px 0;margin-left: 60%;">
          <el-pagination
        background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="SIZE"
          :page-sizes="[10, 20, 30, 40]">
        </el-pagination>
      </div>
        <el-button size="small" class="width ret" type="primary" @click="toUpdate">提交</el-button>
        <el-button size="small" class="width" @click="hide">取消</el-button>
    </div>
    </template>
    
    <script>
      import {isAll,getDetail,getUpdate,getToUpdate} from "../../api/businessTwo/order"
      export default {
        props: {
            Send: {
                type: Object,
            },
            flag:{
              type:Boolean
            }
        },
        data() {
          return {
            ids:[],
            pageSize:10,
            tableData1:[],
            SIZE:0,
            commonName:null,
            distribution2:null,
            state:'',
            num:0,
              medicinesNum:0,
              delivered:0,
              Storage:0,
              NotStorage:0,
            currentPage:1,
            distribution:true,
            form:[
        {
          distribution: '1',
          label: '已配送'
        },
        {
          distribution: '0',
          label: '未配送'
        }
      ],
            tableData: []
          }
        },
        created(){
          this.getList()
    console.log(this.Send);
        },
        watch:{
          state(newdistribution,olddistribution){
this.getList()
          }

        },
        methods:{
          async getList(){    
            if(this.distribution2===""&&this.commonName===""){
            this.distribution2=null
            this.commonName=null
          }else if(this.commonName===""){
            this.commonName=null
          }else if(this.distribution2===""){
            this.distribution2=null
          }   
             let res=await isAll({
              instName:this.Send.instName,
               deliverStatus:this.state,
            medicineNo:this.commonName, 
            orderNo:this.Send.orderNo
             })
             if(res.data.code==200){
              res.data.data.map((v)=>{
                v.purchaseAmount=Math.floor(v.purchaseAmount) 
                if(v.deliverStatus==1){
v.deliverStatus=true
v.deliverName="已配送"
return v
                }else{
                  v.deliverStatus=false
v.deliverName="未配送"
return v 
                }
              })
              console.log(res.data.data);
              this.tableData=res.data.data
             }
             this.number()
             this.SIZE=this.tableData.length
             this.changeTabel()
          },
          number(){
            this.medicinesNum = 0
      this.delivered = 0
      this.Storage = 0
      this.NotStorage = 0
      this.num = this.tableData.length
      console.log(this.tableData);
            this.tableData.map((v)=>{
             if(v.deliverStatus===true){
              this.medicinesNum+=1
             }else{
              this.delivered+=1
             }
             if(v.status==1){
              this.Storage+=1
             }else{
              this.NotStorage+=1
             }
            })
          },
          toUpdate(){
            getToUpdate(this.ids).then((data) => {
              this.getList();
                this.$message.success('提交成功');
            }).catch((data)=>{
      /*         this.$message.error('您已经提交过了'); */
            });
            this.hide()
          },
          typec(a){
      if(a.row.status==1){
        a.row.label="已入库"
        return "success"
      }else{
        a.row.label="未入库"
        return "info"
      }
          },
          toTop(data1){
           if(data1.deliverStatus){
            data1.deliverStatus=true
            data1.deliverName="已配送"
           }else{
            data1.deliverStatus=false
            data1.deliverName="未配送"
           }
  if(data1.deliverStatus==false){
              data1.style=0
            }else{
              data1.style=1
            }
            this.ids.push({id:data1.id,deliverStatus:data1.style})
            console.log(data1,this.ids);
          },
          changeTabel(){
      this.tableData1 = this.tableData.slice((this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize)
    },
          search(){
            this.getList()
          },
            handleCurrentChange(val){
          this.currentPage=val
          this.changeTabel()
            },
            handleSizeChange(val){
              this.pageSize=val
              this.changeTabel()
            },
            hide(){
 this.$emit("changeTwo",false)
          }
          },

          }

    </script>
    
    <style lang="scss" scoped>
    .df{
      display: flex;
      align-items: center;
    }
    .jcsb{
      justify-content: space-between;
    }
    .el-table{
      margin-bottom: 30px;
    }
    .ml{
    margin-left: 60px;
    }
    ::v-deep .el-alert{
      padding:4px 16px !important;
    }
    ::v-deep .el-alert__icon.is-big{
      font-size:22px !important;
    }
    ::v-deep .el-alert__description{
      margin:0

    }
    ::v-deep th{
      background-color: #f1f1f1;
    }
    ::v-deep .el-table__cell{
      height: 50px !important;
    }
    h2{
      font-size: 18px;
    }
    .width{
      width: 120px;
      height: 36px;
    }
    ::v-deep .el-alert--info .el-alert__description{
  color:#000!important;
}
    .ret{
      margin-left: 60%;
      margin-right: 60px;
    }
    .number{
        font-size: 16px;
        color: #2558ac;
  font-weight:700
      }
      ::v-deep th.el-table__cell{
  background-color: #fafafa;
}
::v-deep .el-table__cell{
  border-right: 1px solid #EBEEF5 !important;
  text-align: center;
}
::v-deep .cell{
  display: flex;
  justify-content: center;
}
    </style>